<template>
  <div class="guidecontent" v-if="guideShow">
    <div v-show="index == guideidx" class="guidestep" v-for="(item,index) in guidelist">
      <h4>{{item.title}}</h4>
      <p>{{item.content}}</p>
      <button @click="guideClick(index)">下一步</button>
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        guidelist: [
          {title: '第一步',content: '请点击第一步'},
          {title: '第二步',content: '请点击第二步'},
          {title: '第三步',content: '请点击第三步'}
        ],
        guideidx: 0,
        guideShow: true,
      }
    },
    methods: {
      guideClick(index){
        this.guideidx = index + 1;
        console.log(this.guideidx)
        if(this.guideidx == 3){
          this.guideShow = false;
        }
      }
    }
  }
</script>
<style type="text/css" lang="sass" scoped>
  .guidecontent{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: rgba(0,0,0,0.3);

    .guidestep{
      width: 60%;
      background-color: #fff;
      position: absolute;
      border-radius: 10px;
      &:nth-child(1){
        top: 50px;
        left: 10px;
      }
      &:nth-child(2){
        top: 250px;
        left: 50px;
      }
      &:nth-child(3){
        top: 500px;
        left: 100px;
      }
    }
  }
</style>